@import base

$max_width: 630px
$number_of_items: 5

$slider_width: 400px
$slider_height: 250px
$slider_color: $link_color + #444444

$nav_padding: 3px
$info_padding: 5px

$tab_nav_width: $max_width - $slider_width
$tab_nav_height: $slider_height / $number_of_items - 1
$tab_nav_img_height: $tab_nav_height - $nav_padding * 2
$tab_nav_img_width: $tab_nav_height * $slider_width / $slider_height

#slider
  width: $slider_width
  padding-right: $tab_nav_width
  position: relative
  height: $slider_height overflow hidden
  margin-bottom: 5px
  ul.ui-tabs-nav
    list-style: none
    padding: 0
    margin: 0
    top: 0
    left: $slider_width
    width: $tab_nav_width
    position: absolute
    overflow: hidden
    li
      a
        display: block
        height: $tab_nav_height
        border-bottom: 1px solid $box_color
        img
          float: left
          border: 0
          padding: $nav_padding
          width: $tab_nav_img_width
          height: $tab_nav_img_height
      a:hover
        text-decoration: none
        background: $box_color
      &.ui-tabs-selected
        a
          background: $slider_color
          color: white
  div.ui-tabs-panel
    position: relative
    width: $slider_width
    height: $slider_height
    .panel_info
      left: 0
      bottom: 0
      position: absolute
      height: 70px
      padding: $info_padding
      color: white
      background: url(../img/trans.png)
      width: $slider_width - $info_padding * 2
    a
      color: $slider_color
    h2
      margin: 0
      overflow: hidden
    img
      width: $slider_width
      height: $slider_height
  .ui-tabs-hide
    display: none
